<!--  -->
<template>
    <div>
    <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div style="margin: 10px 0">
        <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="commodityName"></el-input>
        <!-- <el-input style="width: 200px" placeholder="请输入性别" suffix-icon="el-icon-message" class="ml-5" v-model="sex"></el-input>
        <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input> -->
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0">
        <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
        <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定批量删除这些数据吗？" @confirm="delBatch">
            <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
        </el-popconfirm>
        <el-upload action="http://localhost:8081/commodity/import" 
        :show-file-list="false" 
        accept="xlsx" 
        :on-success="handleExcelImportSuccess" 
        style="display: inline-block">
            <el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button>
          </el-upload>
        <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
    </div>
    <!-- <div style="margin: 10px 0">
        <el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
        <el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
        <el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
        <el-button type="primary">导出 <i class="el-icon-top"></i></el-button>
    </div> -->

    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="commodityId" label="商品id" width="80"></el-table-column>
        <el-table-column prop="commodityName" label="商品名" width="140"></el-table-column>
        <el-table-column prop="commodityPrice" label="商品价格" width="120"></el-table-column>
        <el-table-column  label="商品图片">
           <div>
            <el-image
            class="avatar"
            :src="form.commodityPicture"></el-image>
            <!-- <img :src="" alt="" class="avatar"> -->
           </div>
                
                <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        </el-table-column>
<el-table-column prop="commodityDetail" label="商品详情"></el-table-column>
<el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
                <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
                <el-popconfirm
                    class="ml-5"
                    confirm-button-text='确定'
                    cancel-button-text='我再想想'
                    icon="el-icon-info"
                    icon-color="red"
                    title="您确定删除吗？"
                    @confirm="del(scope.row.commodityId)"
                >
                  <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
                </el-popconfirm>
              </template>
</el-table-column>
</el-table>
<div style="padding: 10px 0">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
</div>

<el-dialog title="商品信息" :visible.sync="dialogFormVisible" width="30%">
    <el-form label-width="80px" size="small">
        <el-form-item label="商品名">
            <el-input v-model="form.commodityName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
            <el-input v-model="form.commodityPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
            <el-upload class="avatar-uploader" :action="'http://' + serverIp +':8081/file/upload'" :show-file-list="false" :on-success="handleAvatarSuccess">
                <img v-if="form.commodityPicture" :src="form.commodityPicture" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="商品详情">
            <el-input v-model="form.commodityDetail" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="商品详情">
         <span class="demonstration">生日</span> 
            <el-date-picker v-model="form.commodityDetail" format="yyyy-MM-dd" type="datetime" placeholder="选择出生日期">
            </el-date-picker>
        </el-form-item> -->
        <!-- <el-form-item label="地址">
            <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
    </div>
</el-dialog>
</div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    import {
        serverIp
    } from "../../public/config";
    export default {
        name: 'Commodity',
        data() {
            //这里存放数据
            return {
                serverIp: serverIp,
                tableData: [],
                total: 0,
                pageNum: 1,
                pageSize: 5,
                commodityName: "",
                form: {},
                dialogFormVisible: false,
                multipleSelection: [],
                headerBg: 'headerBg'
            };
        },
        created() {
            console.log(JSON.parse(localStorage.getItem('admin')).authority)

            if (JSON.parse(localStorage.getItem("admin")).authority == 1 || JSON.parse(localStorage.getItem("admin")).authority == 2) {
                this.load()

            } else {
                this.$message.error('权限不足')

            }
        },
        methods: {
            collapse() { // 点击收缩按钮触发
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) { // 收缩
                    this.sideWidth = 64
                    this.collapseBtnClass = 'el-icon-s-unfold'
                    this.logoTextShow = false
                } else { // 展开
                    this.sideWidth = 200
                    this.collapseBtnClass = 'el-icon-s-fold'
                    this.logoTextShow = true
                }
            },
            load() {
                this.request.get("/commodity/page", {
                    params: {
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        commodityName: this.commodityName,
                    }
                }).then(res => {
                    console.log(res)
                    this.tableData = res.records
                    this.total = res.total

                })
            },
            handleExcelImportSuccess() {
                this.$message.success("导入成功")
                this.load()
            },
            exp() {
                window.open("http://localhost:8081/commodity/export")
            },
            save() {
                this.request.post("/commodity", this.form).then(res => {
                    if (res) {
                        this.$message.success("保存成功")
                        this.dialogFormVisible = false
                        this.load()
                    } else {
                        this.$message.error("保存失败")
                    }
                })
            },
            handleAvatarSuccess(res) {
                this.form.commodityPicture = res
            },
            handleAdd() {
                this.dialogFormVisible = true
                this.form = {}
            },
            handleEdit(row) {
                this.form = row
                this.dialogFormVisible = true
            },
            del(commodityId) {
                this.request.delete("/commodity/" + commodityId).then(res => {
                    if (res) {
                        this.$message.success("删除成功")
                        this.load()
                    } else {
                        this.$message.error("删除失败")
                    }
                })
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val
            },
            delBatch() {
                let commodityIds = this.multipleSelection.map(v => v.commodityId) // [{}, {}, {}] => [1,2,3]
                this.request.post("/commodity/del/batch", commodityIds).then(res => {
                    if (res) {
                        this.$message.success("批量删除成功")
                        this.load()
                    } else {
                        this.$message.error("批量删除失败")
                    }
                })
            },
            reset() {
                this.commodityName = "",
                    this.load()
            },

            handleSizeChange(pageSize) {
                console.log(pageSize)
                this.pageSize = pageSize
                this.load()
            },
            handleCurrentChange(pageNum) {
                console.log(pageNum)
                this.pageNum = pageNum
                this.load()
            }
        }
    }
</script>
<style scoped>
    /* //@import url(); 引入公共css类 */
    
    .avatar-uploader {
        text-align: center;
        padding-bottom: 10px;
    }
    
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 138px;
        height: 138px;
        line-height: 138px;
        text-align: center;
    }
    
    .avatar {
        width: 138px;
        height: 138px;
        display: block;
    }
</style>